<template>
	<view class="">
		<u-sticky>
			<view class="p-10" style="background-color: #fff;">
				<view class="datapicker-control">
					<u-search :clearabled="true" v-model="realName" placeholder="姓名" :showAction="false"
						@change="searchChange"></u-search>
				</view>
			</view>
		</u-sticky>
		<u-index-list>
			<template v-for="(item, index) in itemArr" :index="index">
				<u-index-item>
					<u-index-anchor :text="item.letter"></u-index-anchor>
					<u-list>
						<u-list-item v-for="(cell, _index) in item.data" :key="_index" @click="open">
							<u-cell :title="cell.name" @click="handleClick(cell)">
								<template #icon><u-avatar :text="`${cell.name.substr(-1)}`" fontSize="18" randomBgColor>
									</u-avatar></template>
							</u-cell>
						</u-list-item></u-list>
				</u-index-item>
			</template>
		</u-index-list>
		<u-modal :show="show" title="操作" @cancel="show = false" :showCancelButton="true" :showConfirmButton="false">
			<view class="flex m-between">
				<!-- <view class="detail">
					<u-icon name="file-text" color="#2979ff" size="40" @click="handleClick"></u-icon>
				</view> -->
				<view class="phone">
					<u-icon name="phone" color="#2979ff" size="40" @click="handlePhoneClick"></u-icon>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script setup>
	const indexList = reactive(["W"])
	let itemArr = [{
		letter: 'W',
		data: [{
			name: '王邢坤',
			phone: 1343222222
		}, {
			name: '王二',
			phone: 1343222222
		}, {
			name: '王三',
			phone: 1343222222
		}, {
			name: '王四',
			phone: 1343222222
		}]
	}, ]
	const realName = ref('')
	const handleClick = () => {
		uni.navigateTo({
			url: '/pages/my/personDetail?data=' + JSON.stringify(item)
		})
	}
	let show = ref(false)
	const open = () => {
		show.value = true
	}
	// 拨打电话
	const handlePhoneClick = (phoneNum) => {
		uni.makePhoneCall({
			phoneNumber: phoneNum,
			success(res) {
				console.log('拨打成功');
			},
			fail(err) {
				console.log('拨打失败');
			}
		});
	}
	const searchChange = () => {}
</script>

<style lang="scss" scoped>
</style>